<template>
<h2>会员权益列表</h2><br>
权益名称:<input type="text" placeholder="请输入权益名称" v-model="MRname"/>
    是否自定义:
    <select v-model="Iscumstom">
        <option value="0">--请选择--</option>
        <option value="1">是</option>
        <option value="2">否</option>
    </select>
    <input type="button" value="查询" class="btn btn-success" @click="LoadData" style="margin-right: 15px;"/>
<input type="button" value="添加权益" class="btn btn-success"  @click="AddRight"/>
<table class="table-bordered" border="1">
    <thead>
        <tr>
            <td>权益编号</td>
            <td>权益名称</td>
            <td>权益说明</td>
            <td>是否自定义</td>
            <td>权益规则</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in Info">
            <td>{{ item.MR_Id }}</td>
            <td>{{ item.MR_Name }}</td>
            <td>{{ item.MR_Info}}</td>
            <td>{{ item.MR_IsCustom?"是":"否"}}</td>
            <td>{{ item.MR_Rule}}</td>
            <td>
                <a href="#" @click="EditInfo(item.MR_Id)">修改</a>&emsp;
                <a href="#" @click="DelRight(item.MR_Id)">删除</a>
            </td>
        </tr>
    </tbody>
</table>

</template>

<script setup lang="ts">
//导入生命周期钩子
import { onMounted ,ref} from 'vue';

import axios from 'axios';
import {useRouter} from 'vue-router';

const router=useRouter();

//创建响应式数据
const Info=ref([{
    "MR_Id": 0,
    "MR_Name": "",
    "MR_Info": "",
    "MR_IsCustom": true,
    "MR_Rule": ""
}])
//创建 onMounted注册周期钩子用于初始化加载(页面打开加载)
onMounted(()=>{
    LoadData();
})
//创建响应式数据用于保存查询条件
const MRname=ref("")
const Iscumstom=ref(0)
//跳转添加权益页面
const AddRight=()=>{
    router.push ("/AddMemberRights")
}
//完成数据加载
const LoadData=()=>{
    axios.get("https://localhost:7035/api/Member/ShowMemberrightInfo",
        {
            params:{
                name:MRname.value,
                iscustom:Iscumstom.value
            }
        }
    )
    .then(res=>{
        //将后台返回的数据信息保存到响应式数据中
        Info.value=res.data
    })
}

//删除权益
const DelRight=(id:number)=>{
    if(confirm("确认删除吗?")){
        axios.delete("https://localhost:7035/api/Member/DelRights?id="+id)
        .then(res=>{
        if(res.data>0){
            alert("会员权益删除成功")
            LoadData();
        }else{
            alert("会员权益删除失败")
        }
    })
    }

}

//通过路由跳转到修改页面
const EditInfo=(MR_Id:number)=>{
    router.push({
        name:"UpRight",
        params:{
            MR_Id:MR_Id
        }
    })
}






</script>